<template>
    <div v-if="userType">
        <el-card class="good-container">
            <template #header>
                <div class="header">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增用户</el-button>

                    <div style="display: inline-block; float: right">

                        <el-input v-model="search.name" size="medium" placeholder="姓名"
                                  style="max-width: 150px;" ></el-input>
                        <el-select v-model="search.type" placeholder="用户类型">
                            <el-option label="选择用户类型" :value="null"></el-option>
                            <el-option label="研究员" :value="1"></el-option>
                            <el-option label="领导"  :value="2"></el-option>
                            <el-option label="管理员"  :value="3"></el-option>
                        </el-select>

                        <el-button style="margin-left: 10px;cursor: pointer" @click="onSearch"><i class="el-icon-search" > 搜索</i></el-button>

                    </div>

                </div>
            </template>
            <el-table
                    v-loading="loading"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="用户编号"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="性别"
                >
                </el-table-column>
                <el-table-column
                        label="用户类型"
                >
                    <template #default="scope">
                        <span style="color: green;" v-if="scope.row.type === 1">科研人员</span>
                        <span style="color: #ce8129;" v-else-if="scope.row.type===2">领导</span>
                        <span style="color: red;" v-else-if="scope.row.type===3">管理员</span>
                        <span style="color: #ff0000;" v-else>错误</span>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="100"
                >
                    <template #default="scope">
                        <a style="cursor: pointer; margin-right: 10px" @click="handleEdit(scope.row.id)">修改</a>
                    </template>
                </el-table-column>
            </el-table>
            <!--总数超过一页，再展示分页器-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="changePage"
            />
        </el-card>
        <el-dialog  :title="dlgType==='add'?'增加':'修改'"
                    v-model="dlgType"
                    width="35%">
            <DialogUser :type="dlgType" :id="editId" @close="dlgClose" ></DialogUser>
        </el-dialog>
    </div>

</template>

<script>
    import http from "../utils/req";
    import DialogUser from "./DialogUser.vue";
    import userService from '../utils/userService';

    export default {
        name: 'UserManage',
        components: {DialogUser},
        data(){
            return{
                dlgType: null,
                loading: false,
                tableData: null,
                total: 0,
                currentPage: 1,
                multipleSelection: [], // 选中项
                pageSize: 10, // 分页大小
                editId: NaN,
                search:{
                    name: null,
                    type: null
                },
                inSearch: false
            }
        },
        methods:{
            getUserList(){
                this.loading = true
                http.get('/user', {
                    params: {
                        page: this.currentPage,
                        pageSize: this.pageSize,
                        ...(this.inSearch===true?this.search: null)
                    }
                }).then(res => {
                    let data = res.data.data;
                    this.tableData = data['records']
                    this.total = data.total;
                    this.currentPage = data.current;
                    this.loading = false
                })
            },
            onSearch(){
                this.inSearch = true;
                console.log("搜索点击")
                this.getUserList();
            },
            handleAdd(){
                this.dlgType = 'add'
                this.editId = ''
            },
            handleEdit(id) {
                this.dlgType = 'edit'
                this.editId = id
            },
            handleSelectionChange (val){
                this.multipleSelection = val
            },
            changePage(val) {
                this.currentPage = val
                this.getUserList()
            },
            dlgClose(changed = false){
                this.dlgType = null;
                if ( this.editId === userService.currentUser.id)
                    userService.refreshCurrentUser()
                if (changed)
                    this.getUserList();
            },
        },
        computed:{
            currentUser(){
                return userService.currentUser;
            },
            userType(){
                return userService.currentUser && userService.currentUser.type ===3;
            }
        },
        mounted(){
            this.getUserList()
        }
    }
</script>

<style scoped>
    .good-container {
        min-height: 100%;
    }
    .el-card.is-always-shadow {
        min-height: 100%!important;
    }
    button{
        cursor: pointer;
    }
</style>